<template>
    <div id="list-sorts">
      <header>
        <span>{{goods.name}}</span>
        <div @click="showMore(goods.id)">
          <p>{{text}}</p>
          <i class="icon iconfont">&#xe678;</i>
        </div>
      </header>
        <ul class="tab_content">
          <li @click="selectGood(good.id)" class="tab_item" v-for= "(good, key) in goods.goodsList" :key= 'good.index' v-show = "key<num" @goods="upData">
            <img :src="good.thumb" :alt="good.title"/>
            <p>{{good.title}}</p>
            <div class="goods-prices">
              <p><span>￥</span>{{good.unit_price}}</p>
            </div>
          </li>
        </ul>
    </div>
</template>

<script type="ECMAScript 6">
    export default {
      name: 'list-sorts',
      props: {
          goodsSort: Object
        },
      data () {
          return {
            num: 3,
            isShow: true,
            text: '更多',
            goods: this.goodsSort
          };
      },
      methods: {
        selectGood (id) {
          let url = '../goodDetail/main?id=' + id;
          mpvue.navigateTo({ url });
        },
        upData (goods) {
          console.log(goods);
        },
        showMore (id) {
          this.isShow = !this.isShow;
          let that = this;
          if (that.isShow) {
            that.num = 3;
            that.text = '更多';
          } else if (this.goods.status !== 1) {
            that.$httpWX.get({
              url: 'api/v1.index/goods_type_id?type_id=' + id
            }).then((response) => {
              that.$set(this.goods, 'goodsList', response.data.goodsList);
              that.goods.goodsList.forEach(good => {
                that.$set(good, 'thumb', that.$store.state.http + good.thumb);
              });
              that.$set(this.goods, 'status', 1);
              that.text = '收起';
              that.num = this.goods.goodsList.length;
            }, (response) => {
              console.log('请求失败');
            });
          } else {
            that.num = this.goods.goodsList.length;
            that.text = '收起';
          }
        }
      },
      created () {
        this.goods.goodsList.forEach(good => {
          this.$set(good, 'thumb', this.$store.state.http + good.thumb);
        });
      }
    };
</script>

<style lang="stylus" scoped>
  #list-sorts
    margin-top 8px; padding 0 13px; background #fff
    &>header
      display flex; height 53px; line-height 53px
      &>span
        flex 1; font-size 18px; font-weight bold
       &>div
          display flex
          &>p
            font-size 13px; color #8B8B8B
          &>i
            font-size 16px;color #AEAEAE
    .tab_content
      display flex; flex-flow row wrap; max-height 350px; overflow hidden;overflow-y auto;padding-left 13px;
      .tab_item
        margin-right: 5px; width 31.5%;margin-bottom: 10px;
        img
          width: 90px; height: 90px; border-radius: 3px
        p:first-of-type
          margin-top: 5px; font-size: 13px; font-weight 500
        .goods-prices
          &>p:last-of-type
            display inline-block; margin-top: 2px; font-size: 15px; color: #F54727; font-weight: 500
          &>p:last-of-type>span
            font-size: 11px;
          &>span
            display inline-block; font-size 11px; color #AEAEAE; text-decoration line-through; text-align center;
</style>
